<!-- 总览面板 -->
<template>
  <div class="overview-panel flex flex-col justify-between">
    <div
      class="overview-item flex justify-between items-baseline"
      v-for="(item, index) in overviewData"
      :key="index"
    >
      <div class="item-name">{{ item.text }}</div>
      <div class="item-value ali">{{ item.value }}</div>
      <div class="item-unit">{{ item.unit }}</div>
      <div :class="['item-increase', item.increase ? 'increase' : '']">
        <el-icon v-if="item.increase"><Top /></el-icon>
        <el-icon v-else><Bottom /></el-icon>
      </div>
      <div :class="['item-desc', item.increase ? 'increase' : '']"> {{ item.increaseText }} </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Top, Bottom } from '@element-plus/icons-vue'
defineOptions({ name: 'RepOverview' })
const props = defineProps({
  overviewData: {
    type: Array,
    default: () => []
  }
})
</script>
<style scoped lang="scss">
@font-face {
  font-family: Ali;
  src: url('../../font/ysbth.ttf');
}

.ali {
  font-family: Ali;
}

.overview-panel {
  height: 130px;
  padding: 20px 55px;
  margin-top: 25px;
  margin-bottom: 45px;
  line-height: 1;
  background: #f9f9f9;
  border-radius: 18px;
  box-sizing: border-box;

  .item-name {
    font-size: 16px;
    color: #212020;
  }

  .item-value {
    font-size: 25px;
    // font-weight: bold;
    color: #333;
  }

  .item-unit {
    font-size: 16px;
    color: #716e6e;
  }

  .item-desc {
    font-size: 16px;
    color: #2ed016;
  }

  .item-desc.increase {
    color: #d01616;
  }

  .item-increase {
    color: #2ed016;
  }

  .item-increase.increase {
    color: #d01616;
  }
}
</style>
